<template>
  <div>
    <el-button @click="add" v-if="parentId!==-1">添加</el-button>
    <el-table
      :data="manyData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-tag
            class="ml15"
            v-for="(item,index) in props.row.attr_vals.split(',').filter(v=>v)"
            :key="index"
            closable
            :disable-transitions="false"
            @close="handleClose(props.row,index)"
          >{{item}}</el-tag>
          <el-input
            class="input-new-tag ml15"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm(props.row)"
          >
          </el-input>
          <el-button  v-else class="button-new-tag ml15" size="small" @click="showInput">+ New Tag</el-button>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        label="板式"
        prop="attr_name">
      </el-table-column>
      <el-table-column
        label="id"
        prop="attr_id">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="prop">
          <el-button @click="edit(prop.row)" type="success">修改</el-button>
          <el-button @click="remove(prop.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { deleteAttributes, editAttributes } from '@/api/attributes'
import { Form } from '@/components/goods/params/params_modify.vue'
import { MessageType } from 'element-ui/types/message'
export interface TagData {
  'attr_id':number,
  'attr_name':string,
  'attr_sel':string,
  'attr_vals':string,
  'attr_write':string,
  'cat_id':number,
  'delete_time':null|string
}
@Component
export default class paramsList extends Vue {
  @Prop()
  public parentId?:number

  @Prop()
  public parentRef:any

  @Prop()
  public manyData?:Array<any>

  private inputValue=''
  private inputVisible=false

  async handleInputConfirm (data:TagData) {
    const inputValue = this.inputValue
    if (inputValue) {
      const str = data.attr_vals.split(',')
      str.push(inputValue)
      data.attr_vals = str.join()
      this.inputVisible = false
      this.inputValue = ''
      const res = await editAttributes({
        id: this.parentId || -1,
        attrId: data.attr_id,
        attr_name: data.attr_name,
        attr_sel: data.attr_sel,
        attr_vals: data.attr_vals
      })
      console.log(res)
    }
    this.inputVisible = false
    this.inputValue = ''
  }

  add () {
    const { render, Add } = this.parentRef
    Add.isOpen(this.parentId)
  }

  async handleClose (data:TagData, index:number) {
    data.attr_vals = data.attr_vals.split(',').filter((item, i) => {
      return index !== i
    }).join()
    const res = await editAttributes({
      id: this.parentId || -1,
      attrId: data.attr_id,
      attr_name: data.attr_name,
      attr_sel: data.attr_sel,
      attr_vals: data.attr_vals
    })
    console.log(res)
  }

  showInput () {
    this.inputVisible = true
    this.$nextTick(() => {
      const { saveTagInput } = this.$refs as any
      saveTagInput.$refs.input.focus()
    })
  }

  edit (data:TagData) {
    const { Modify, render } = this.parentRef
    const form:Form = {
      id: this.parentId as number,
      attrId: data.attr_id,
      attr_vals: data.attr_vals,
      attr_name: data.attr_name,
      attr_sel: data.attr_sel
    }
    Modify.isOpen(form, render)
  }

  async remove (data:TagData) {
    if (!this.parentId) return
    const { meta } = await deleteAttributes({ id: this.parentId, attrid: data.attr_id })
    let type:MessageType
    if (meta.status >= 200 && meta.status < 300) {
      type = 'success'
    } else {
      type = 'error'
    }
    this.$message({
      message: meta.msg,
      type
    })
    const { render } = this.parentRef
    render([this.parentId])
  }
}
</script>

<style scoped>

</style>
